import { defineComponent, onMounted, reactive } from "vue";
import { RouterView, useRoute, useRouter } from "vue-router";
import styles from "./Qyinform.module.less";
import { imgPath } from "@/common/utils";
import { $userAuthStatus } from "@/api/account/account";
import { message } from "ant-design-vue";
export default defineComponent({
  name:'accountQyinform',
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      status:0,
    })

    onMounted(()=>{
      authStatus()
    })

    //企业认证状态
    const authStatus = () => {
      $userAuthStatus().then((res:any)=>{
        state.status = res?.data?.status || '';
        if(Number(state.status) === 10){
          router.replace(`/account/Qyinform/Auditing?state=${state.status}`);
        }else if(Number(state.status) === 20){
          router.replace(`/account/Qyinform/Auditing?state=${state.status}`);
        }else if(Number(state.status) === 30){
          message.error('认证失败，请重新填写')
          router.replace(`/account/Qyinform/EnterpriseInformation`);
        }else{
          router.replace('/account/Qyinform/EnterpriseInformation');
        }
      }).catch(()=>{
        router.replace('/account/Qyinform/EnterpriseInformation');
      })
    }
    const Header = () => (
      <div class={styles.header}>
        <span>企业信息</span>
        {/* {
          (route.name === 'accountQyinformAuditing' && Number(state.status) === 20) && (
            <div class={styles['update-btn']} onClick={() => { router.replace('/account/Qyinform/EnterpriseInformation') }}>变更企业信息</div>
          )
        } */}
      </div>
    )
    const Steper = () => (
      <div class={styles.steper}>
        <div class={styles['wlb-enter-step']}>
          <div class={styles['wlb-enter-step_item']}>
            <img src={imgPath("/steper-1-simple.png")} v-show={route.name !== 'accountQyinformEnterpriseInformation'} />
            <img src={imgPath("/steper-1-deep.png")} v-show={route.name === 'accountQyinformEnterpriseInformation'} />
            <span>完善企业信息</span>
          </div>
          <div class={styles['wlb-enter-step_item']}>
            <img src={imgPath("/steper-2-simple.png")} v-show={route.name === 'accountQyinformAuditing' && Number(state.status) !== 10} />
            <img src={imgPath("/steper-2-gray.png")} v-show={route.name === 'accountQyinformEnterpriseInformation'} />
            <img src={imgPath("/steper-2-deep.png")} v-show={route.name === 'accountQyinformAuditing' &&  Number(state.status) === 10} />
            <span>等待审核结果</span>
          </div>
          <div class={styles['wlb-enter-step_item']}>
            <img src={imgPath("/steper-3-gray.png")} v-show={!(route.name === 'accountQyinformAuditing' && Number(state.status) === 20)} />
            <img src={imgPath("/steper-3-deep.png")} v-show={route.name === 'accountQyinformAuditing' && Number(state.status) === 20} />
            <span>审核结果</span>
          </div>
        </div>
      </div>
    )
    const Main = () => (
      <div class={styles.main}>
        <RouterView />
      </div>
    )
    return () => (
      <div class={styles.Qyinform}>
        <Header />
        <Steper />
        <Main />
      </div>
    )
  }
})